<template>
	<view class="padding">
		<view class="bg padding radius">
			<view class=" u-flex " @click="binddetail(order)">
				<view class="u-m-r-10" v-if="order.orderTaking">
					<image :src="order.orderTaking.homepageImg" style="width: 140rpx;height: 140rpx;" mode="aspectFill">
					</image>
				</view>
				<view class="u-flex-1 text-white" v-if="order.orderTaking">
					<view class="u-font-14  text-bold padding-bottom-xs u-line-1" style="width: 480rpx;">
						{{order.orderTaking.myLevel}}
					</view>
					<view class="padding-top-xs text-lg">
						<text style="font-size: 20rpx;">￥</text>
						{{order.orderTaking.oldMoney}}元/{{order.orderTaking.unit}}<text
							style="font-size: 20rpx;margin-left: 10rpx;">*</text>
						<text style="color: #666666;">{{order.orderNumber}}{{order.orderTaking.unit}}</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between margin-top">
				<view style="width: 120upx;">实付款</view>
				
				<view class="text-white text-lg" v-if="order.paySumMoney">
					<text class="text-sm">￥</text>{{order.paySumMoney}}
				</view>
				<view class="text-white text-lg" v-else>
					<text class="text-sm">￥</text>{{order.payMoney}}
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top">
			<view class="text-lg text-bold">
				服务信息
			</view>
			<view class="margin-right-xs">
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">服务类型</view>
					<view class="text-white" v-if="order.orderTaking">
						<text v-for="(item,index) in order.orderTaking.gameId" :key="index"
							class="margin-left-sm">{{item}}</text>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">服务时间</view>
					<view class="text-white">{{order.startTime}}</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">服务地点</view>
					<view class="text-white" @tap="bindGps(order.latitude,order.longitude,order.detailsAddress)">
						{{order.city}}{{order.district}}{{order.detailsAddress}}
						<u-icon name="map"></u-icon>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">联系方式</view>
					<view class="text-white" @click="bindphone(order.phone)">{{order.mobie}}
						<u-icon name="phone"></u-icon>
						<text class="margin-left-sm"> {{order.name}}</text>
					</view>
				</view>
				<view class=" margin-top-lg" v-if="order.remarks">
					<view class="text-bold" style="width: 165rpx;">备注</view>
					<view class="text-white margin-top">{{order.remarks}}</view>
				</view>
			</view>
			<!-- <view class="flex justify-between margin-top">
				<view @click="goMsg">
					<u-icon name="chat" size="32" color="#557EFD" class="margin-right-sm"></u-icon>联系TA
				</view>
				<view class="text-white">实付：<text class="text-lg text-bold">{{order.payMoney}}元</text></view>
			</view> -->
		</view>
		<view class="bg padding radius margin-top" v-if="order.state==1||order.state==2">
			<view class="text-lg text-bold margin-bottom">服务前照片</view>
			<view class="flex flex-wrap justify-between">
				<view class="flex margin-bottom-sm"
					style="width: 48%;height: 200rpx;margin-right: 5rpx;position: relative;"
					v-for="(image,index) in order.startServiceImg" :key="index"
					@click="saveImg( order.startServiceImg,index)">
					<image :src="image" style="width: 100%;height: 100%;border-radius: 10upx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top" v-if="order.state==2">
			<view class="text-lg text-bold margin-bottom">服务后照片</view>
			<view class="flex flex-wrap justify-between">
				<view class="flex margin-bottom-sm"
					style="width: 48%;height: 200rpx;margin-right: 5rpx;position: relative;"
					v-for="(image,index) in order.endServiceImg" :key="index"
					@click="saveImg( order.endServiceImg,index)">
					<image :src="image" style="width: 100%;height: 100%;border-radius: 10upx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top" v-if="order.state==1">
			<view class="text-lg text-bold margin-bottom">服务后照片</view>
			<view class="flex flex-wrap">
				<view v-if="endImgs.length">
					<view class="flex margin-right-sm flex-wrap">
						<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
							v-for="(image,index) in endImgs" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
								@click="removeImg(index,2)">
								<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb "
					style="background: #f5f5f5;width: 200rpx;height: 200rpx;">
					<view class="text-center" @click="addImage(2)">
						<image src="../static/photo.png" style="width:60upx;height: 50upx;"></image>
						<view class="text-sm">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top" v-if="order.state==4">
			<view class="text-lg text-bold margin-bottom">服务前照片</view>

			<view class="flex flex-wrap">
				<view v-if="startImgs.length">
					<view class="flex margin-right-sm flex-wrap">
						<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
							v-for="(image,index) in startImgs" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
								@click="removeImg(index,1)">
								<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
							</view>

						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb "
					style="background: #f5f5f5;width: 200rpx;height: 200rpx;">
					<view class="text-center" @click="addImage(1)">
						<image src="../static/photo.png" style="width:60upx;height: 50upx;"></image>
						<view class="text-sm">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top" style="margin-bottom: 140rpx;">
			<view class="text-lg text-bold">
				订单信息
			</view>
			<view class="margin-right-xs">
				<view class="flex justify-between margin-top-lg" v-if="order.refundSumMoney">
					<view class="text-bold" style="width: 140upx;">退款总金额 </view>
					<view  class="text-white">{{order.refundSumMoney}}元</view>
				</view>
				<view class="flex justify-between margin-top-lg" v-if="order.paySumMoney">
					<view class="text-bold" style="width: 140upx;">支付总金额 </view>
					<view  class="text-white">{{order.paySumMoney}}元</view>
				</view>
				
				
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">订单编号</view>
					<view @click="copyOrder(order.ordersNo)" class="text-white">{{order.ordersNo}}
						<u-icon name="order"></u-icon>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">下单时间</view>
					<view class="text-white">{{order.createTime}}</view>
				</view>

			</view>
		</view>


		<view class="tabber margin-right-xs padding-right" v-if="order.state ==1||order.state ==4">
			<!-- <view>
				<u-button v-if="order.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
					@click="copyOrderuser(order)">一键复制</u-button>
			</view> -->
			<view class="flex align-center">
				<!-- <u-button v-if="order.state == 4" :custom-style="customStyle1" shape="circle" :plain="true"
					@click="cancelOrder(order,3)">拒绝接单</u-button> -->
				<u-button v-if="order.state == 1" :custom-style="customStyle" shape="circle" :plain="true"
					@click="Ordersure()">完成服务</u-button>
				<u-button v-if="order.state == 1" :custom-style="customStyle" shape="circle" :plain="true"
					@click="tkMoney = true ">退款</u-button>
				<u-button v-if="order.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
					@click="cancelOrder(order,1)">开始服务</u-button>
			</view>
		</view>

		<!-- 确认码弹框 -->
		<view class="boxtk" v-if="reverTrue">
			<view class="whitebox padding">
				<view class="flex justify-between align-center">
					<view style="font-size:38upx;color:#333333" class="text-bold">确认码</view>
					<view @click="bindclose(1)">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view style="margin-top:59upx;">
					<input placeholder="请输入确认码" name="input" maxlength="10" v-model="codeNum" type="number"
						style="background: #F2F2F2;height:100upx;padding:30upx"></input>
				</view>
				<view class="btn" @click="cancelOrder(order,2)">确定</view>
			</view>
		</view>
		
		<!-- 退款弹框 -->
		<u-popup v-model="tkMoney" mode="center" border-radius="14">
			<view class=" padding">
				<view class="flex justify-between align-center">
					<view style="font-size:38upx;color:#333333" class="text-bold">退款</view>
					<view @click="bindclose(2)">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view class="margin-top text-26" style="color: red;">可退款金额：<text class="text-xl">{{refundMoney}}</text>元
				</view>
				<view style="margin-top:30upx;border-radius: 16rpx;background: #F2F2F2;">
					<input placeholder="请输入退款金额" name="input" maxlength="10" v-model="tkPrice" type="number"
						style="height:100upx;padding:30upx"></input>
				</view>
				<view class="btn" @click="tuikuan()" v-if="refundMoney>0">确定</view>
				<view class="btn" style="background: #eaeaea;color:#585858"  v-else>确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					color: '#fff',
					backgroundColor: '#557EFD',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				id: '',
				order: {
					user: {},
					game: {}
				},
				isTrue: 0,
				vipMoney: '',
				data: [],
				price: '',
				startImgs: [],
				startImg: '',
				endImgs: [],
				endImg: '',
				reverTrue: false,
				codeNum: '',
				longitude: '',
				latitude: '',
				city: '',
				
				tkMoney: false,
				tkPrice: '',
				refundMoney: 0
				
			}
		},
		onLoad(e) {
			// console.log(e)
			var jsObject = JSON.stringify(e);
			// console.log(jsObject)
			this.isTrue = e.isTrue
			if (this.isTrue) {

			}
			//定位
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度1：' + res.longitude);
					console.log('当前位置的纬度2：' + res.latitude);
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.getcity()
				}
			});
			uni.setNavigationBarTitle({
				title: '订单详情'
			})
			this.id = e.id
			this.getOrder()
			this.getOrderRefundMoney()
		},
		methods: {
			tuikuan() {
				if (!this.tkPrice) {
					uni.showToast({
						title: '请输入退款金额',
						icon: 'none'
					})
					return
				}
			
				if (this.tkPrice > this.refundMoney) {
					uni.showToast({
						title: '退款金额不能大于' + this.refundMoney + '元',
						icon: 'none'
					})
					return
				}
				let data = {
					ordersId: this.id,
					orderType: 2,
					money: this.tkPrice
				}
				this.$Request.postT("/app/orders/refundMoney", data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						this.tkMoney = false
						this.getOrder()
						this.getOrderRefundMoney()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.tkPrice= ''
				});
			},
			//获取订单可退款金额   1任务 2家政
			getOrderRefundMoney() {
				let data = {
					ordersId: this.id,
					orderType: 2
				}
				this.$Request.getT("/app/orders/selectRefundMoney", data).then(res => {
					if (res.code == 0) {
						this.refundMoney = res.data
					}
				});
			
			},
			getcity() {
				let data = {
					lat: this.latitude,
					lng: this.longitude
				}
				this.$Request.get('/app/Login/selectAddress', data).then(res => {
					if (res.code == 0) {
						this.city = res.data
					}
				})
			},
			Ordersure() {
				if (this.endImgs.length == 0) {
					uni.showToast({
						title: '请上传服务后照片',
						icon: 'none'
					})
					return
				}
				if (this.endImgs.length <= 3) {
					uni.showToast({
						title: '图片最少四张',
						icon: 'none'
					})
					return
				}
				this.codeNum = ''
				// this.codeIndex = index;
				this.reverTrue = true
			},
			bindclose(index) {
				if (index == 1) {
					this.reverTrue = false
				} else {
					this.tkMoney = false
					this.tkPrice= ''
				}
			},
			//一键复制
			copyOrderuser(order) {
				let that = this;
				let data = '服务类型：' + order.orderTaking.gameId + '\n' + '服务地点：' + order.orderTaking.detailadd + '\n' +
					'服务用户：' + order.name + '\n' + '服务电话：' + order.phone + '\n' + '服务时间：' + order.startTime
				uni.setClipboardData({
					data: data,
					success: function() {
						that.$queue.showToast('复制成功')
					}
				})
			},
			copyOrder(order) {
				let that = this;
				uni.setClipboardData({
					data: order,
					success: function() {
						that.$queue.showToast('复制成功')
					}
				})
			},
			// 一键导航
			bindGps(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			binddetail(e) {
				console.log(e)
				uni.navigateTo({

					url: '/pages/index/game/order?id=' + e.orderTakingId
				})
			},
			getOrder() {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				});
				let data = {
					id: this.id
				}
				this.$Request.get('/app/orders/queryOrders', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.order = res.data
						if (this.order.orderTaking.gameId) {
							this.order.orderTaking.gameId = this.order.orderTaking.gameId.split(",");
						}
						if (this.order.startServiceImg) {
							this.order.startServiceImg = this.order.startServiceImg.split(',')
						}
						if (this.order.endServiceImg) {
							this.order.endServiceImg = this.order.endServiceImg.split(',')
						}
						if (this.order.phone) {
							let mobie = this.order.phone
							this.order.mobie = mobie.substring(0, 3) + "****" + mobie.substring(
								7)
						}
						this.price = (res.data.orderTaking.oldMoney * res.data.orderNumber)
							.toFixed(2)
						this.vipMoney = (res.data.orderTaking.money * res.data.orderNumber - res.data.payMoney * 1)
							.toFixed(2)
					}
				})
			},
			// 取消订单
			cancelOrder(e, status) {
				let that = this
				if (status == 2) {
					if (!this.codeNum) {
						uni.showToast({
							title: '请输入确认码',
							icon: 'none'
						})
						return
					}
					that.endImg = that.endImgs
					that.endImg = that.endImg.toString()
					that.reverTrue = false
				}
				if (status == 1) {
					if (that.startImgs.length == 0) {
						uni.showToast({
							title: '请上传服务前照片',
							icon: 'none'
						})
						return
					}
					if (that.startImgs.length <= 3) {
						uni.showToast({
							title: '图片最少四张',
							icon: 'none'
						})
						return
					}
					that.startImg = that.startImgs
					that.startImg = that.startImg.toString()
					that.reverTrue = false
				}


				let content = ''
				if (status == 3) {
					content = '确定拒绝接单吗？'
				} else if (status == 2) {
					content = '确定订单已经完成吗？如果未完成，客户投诉将采取封号处理'
				} else if (status == 1) {
					content = '确定开始服务吗？'
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							let data
							if (status == 3) {
								data = {
									id: e.ordersId,
									status
								}
							} else if (status == 2) {
								data = {
									endServiceLongitude: that.longitude,
									endServiceLatitude: that.latitude,
									endTaskAddress: that.city,
									id: e.ordersId,
									endServiceImg: that.endImg,
									code: that.codeNum,
									status
								}
							} else if (status == 1) {
								data = {
									startTaskAddress: that.city,
									startServiceLongitude: that.longitude,
									startServiceLatitude: that.latitude,
									id: e.ordersId,
									startServiceImg: that.startImg,
									status
								}
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									if (status == 3 || status == 1) {
										that.getOrder()
									} else if (status == 2) {
										that.codeNum = ''

										that.getOrder()
									}
								} else {
									that.$queue.showToast(res.msg)
								}
							})
						}
					},
				})

			},
			// 支付订单
			pay() {
				let that = this
				uni.showModal({
					title: '付款提示',
					content: '确认支付' + that.order.payMoney + '元吗?',
					success: function(re) {
						if (re.confirm) {
							console.log('用户点击确定');
							that.$Request.post("/app/orders/payMoney", {
								ordersId: that.order.ordersId,
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else if (re.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},

			// cancelOrder(e) {
			// 	let data = {
			// 		id: e.ordersId,
			// 		status: '3'
			// 	}
			// 	this.$Request.get('/app/orders/cancelOrder', data).then(res => {
			// 		if (res.code == 0) {
			// 			uni.showToast({
			// 				title: '取消成功',
			// 				icon: 'none'
			// 			})
			// 			setTimeout(function() {
			// 				uni.navigateBack()
			// 			}, 1000)
			// 		}
			// 	})
			// },
			goMsg() {
				let data = {
					userId: uni.getStorageSync('userId'),
					focusedUserId: this.order.user.userId,
					userType: 1
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = this.order.user.userId == res.data.userId ? res.data.focusedUserId : this.order
							.user.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id
						})
					}
				})
			},
			// 查看图片
			saveImg(imgs, index) {
				if (this.LBSelect) {
					if (index == this.LBIndex - 1) {
						return;
					}
				}
				// console.log(imgs)
				let that = this;
				let imgArr = imgs
				// imgArr.push(imgs);
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			removeImg(index, state) {
				if (state == 1) {
					this.startImgs.splice(index, 1)
				} else if (state == 2) {
					this.endImgs.splice(index, 1)
				}
			},
			// 图片上传
			addImage(e) {
				let that = this
				uni.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								url: 'https://jiazhengv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										console.log(JSON.parse(uploadFileRes.data).data)
										that.startImgs.push(JSON.parse(uploadFileRes.data).data)
									} else if (e == 2) {
										that.endImgs.push(JSON.parse(uploadFileRes.data).data)
									}
									uni.hideLoading();
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}

	.bg {
		background: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 127rpx;
		display: flex;
		align-items: center;
		justify-content: end;
	}

	.boxtk {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.whiteboxs {
		// width: 461upx;
		// height: 563upx;
		text-align: -webkit-center;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 185px;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.whitebox {
		width: 550upx;
		height: 440upx;
		background: #FFFFFF;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 450upx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.btn {
		width:520upx;
		height: 88upx;
		background: #557EFD;
		/* box-shadow: 0upx 10upx 20upx 0upx #FFD9B3; */
		border-radius: 16upx;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		line-height: 88upx;
		margin-top: 43upx;
	}
</style>